<template>
            <div class="codemirror yamlcode">
                <!-- codemirror -->
                <codemirror v-model="code" :options="cmOption"></codemirror>
            </div>
</template>

<script>
    // theme css
    import 'codemirror/theme/solarized.css'
    import CodeMirror from 'codemirror'
    CodeMirror.defineMode('mymode', () => {
        return {
            token(stream, state) {
                if (stream.match("const")) {
                    return "keyword"
                } else if (stream.match("111")) {
                    return "number"
                } else {
                    stream.next()
                    return null
                }
            }
        }
    })
    export default {
        data() {
            return {
                code: ``,
                cmOption: {
                    tabSize: 4,
                    styleActiveLine: true,
                    lineNumbers: true,
                    line: true,
                    mode: 'mymode',
                    theme: 'solarized light'
                }
            }

        },
        methods: {
            getCodeValue() {
                CodeMirror.getValue()
            }
        }
    }
</script>
<style>
    .yamlcode  .CodeMirror {
        height: 600px !important;
    }
</style>